<template>
	<view class="content">
		<image class="isLoading" src="../../static/isLoading.gif" v-if="isLoading"></image>
		<view v-if="!isLoading">
			<view>
				<u-notice-bar :text="text1"></u-notice-bar>
			</view>
			<view class="search"><u-search @search="search" @custom="search" placeholder="请输入搜索内容"
					v-model="searchValue"></u-search></view>
			<view class="tabs"><u-tabs :list="listNB" @click="click" lineWidth="30" lineHeight="6" lineColor="green"
					:activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }"></u-tabs></view>
			<view class="divider"></view>
			<view v-if="isBeiYuan">
				<view>
					<view class="lunbotu">
						<u-swiper :list="list2" keyName="image" showTitle :autoplay="true" circular></u-swiper>
					</view>
					<scroll-view class='scrollContainer' scroll-x>
						<view class='scrollitem' v-for="(item, index) in goodsArr" :key="index" @click="getItem(index)">
							<image class="scrollimage" :src="item.picture"></image>
							<view class="recommandItemText">{{item.actClassName}}</view>
						</view>
						<view class="EmptyData" v-if="goodsArr.length==0">暂无数据</view>
					</scroll-view>
				</view>

				<view class="divider"></view>
				<view>
					<u-empty v-if="cardList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
					<view class="card-list">
						<view class="card-item" v-for="(item, index) in cardList" :key="index" @click="getGoods(item)">
							<!-- 左侧图片 -->
							<view class="card-image">
								<image :src="item.picture" :style="{ width: 100 + 'px', height: 80 + 'px' }"
									mode="aspectFill"></image>
							</view>
							<!-- 右侧文字 -->
							<view class="card-content">
								<view class="card-title">{{ item.shopName }}</view>
								<view style="position: absolute; padding-top: 6rpx;">
									<u-rate size="15" allowHalf="true" readonly="true" count="5"
										v-model="item.shopScore"></u-rate>
								</view>
								<view style="padding-left: 190rpx;">{{ item.shopScore }}</view>
								<view>地址：{{ item.shopAddress }}</view>
								<view class="card-description">{{ item.shopDescription }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isNanYuan">
				<view>
					<view class="lunbotu">
						<u-swiper :list="list2" keyName="image" showTitle :autoplay="true" circular></u-swiper>
					</view>
					<scroll-view class="scrollContainer" scroll-x>
						<view class="scrollitem" v-for="(item, index) in goodsArr" :key="index" @click="getItem(index)">
							<image class="scrollimage" :src="item.picture"></image>
							<view class="recommandItemText">{{ item.actClassName }}</view>
						</view>
						<view class="EmptyData" v-if="goodsArr.length == 0">暂无数据</view>
					</scroll-view>
				</view>

				<view class="divider"></view>
				<view>
					<u-empty v-if="cardList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
					<view class="card-list">
						<view class="card-item" v-for="(item, index) in cardList" :key="index" @click="getGoods(item)">
							<!-- 左侧图片 -->
							<view class="card-image">
								<image :src="item.picture" :style="{ width: 100 + 'px', height: 80 + 'px' }"
									mode="aspectFill"></image>
							</view>
							<!-- 右侧文字 -->
							<view class="card-content">
								<view class="card-title">{{ item.shopName }}</view>
								<view style="position: absolute; padding-top: 6rpx;">
									<u-rate size="15" allowHalf="true" readonly="true" count="5"
										v-model="item.shopScore"></u-rate>
								</view>
								<view style="padding-left: 190rpx;">{{ item.shopScore }}</view>
								<view>地址：{{ item.shopAddress }}</view>
								<view class="card-description">{{ item.shopDescription }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical"
				@trigger="trigger"></uni-fab>
		</view>
		<!-- <view>
			<uni-fab :pattern="pattern" :content="content1" horizontal="left" vertical="bottom" direction="vertical"
				@trigger="gotoCheck"></uni-fab>
		</view> -->
	</view>
</template>

<script>
	const lineBg =
		"";

	export default {
		data() {
			return {
				content: [{
					iconPath: '/static/ruzhu.png',
					selectedIconPath: '/static/ruzhu.png',
					text: '我要入驻',
					active: false
				}],
				content1: [{
					iconPath: '/static/ruzhu.png',
					selectedIconPath: '/static/ruzhu.png',
					text: '我要审核',
					active: false
				}],
				pollingInterval: null,
				text1: '欢迎来到GJ校聚！在这里你可以获得大量校园信息',
				list2: [],
				searchValue: '',
				isBeiYuan: true,
				isNanYuan: false,
				isLastPage: false,
				isLoading: true,
				position: 'north',
				score: 0.0,
				address: '广州市',
				page: 1,
				length: 10,
				cardList: [],
				goodsArr: [],
				floor: 0,
				listNB: [{
						name: '北苑'
					},
					{
						name: '南苑'
					}
				]
			};
		},
		onShow() {
			let that = this;
			that.page = 1;
			that.length = 10;
			that.loadMessageList(that);
		},
		onLoad() {
			let that = this;
			that.$ajax(that.$url.searchAllRotationChart, "GET", null, function(resp) {
				that.list2 = resp.data.result;
			})
			// that.loadMessageList(that);
			that.$ajax(that.$url.getLoginUser, "GET", null, function(resp) {
				uni.setStorageSync('userId', resp.data.result.id)
				uni.setStorageSync('nickname', resp.data.result.nickname)
				uni.setStorageSync("avatar", resp.data.result.avatar);
			})
			that.getMessage();
			setTimeout(() => {
				that.isLoading = false;
			}, 1500);
		},
		onReachBottom: function() {
			let that = this;
			if (that.isLastPage) {
				return;
			}
			that.page = that.page + 1;
			that.loadMessageList(that);
		},
		onPullDownRefresh() {
			let that = this;
			that.$ajax(that.$url.searchAllRotationChart, "GET", null, function(resp) {
				that.list2 = resp.data.result;
			})
			that.loadMessageList(that);
			that.$ajax(that.$url.getLoginUser, "GET", null, function(resp) {
				uni.setStorageSync('userId', resp.data.result.id)
				uni.setStorageSync('nickname', resp.data.result.nickname)
				uni.setStorageSync("avatar", resp.data.result.avatar);
			})
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1200);
		},
		onUnload() {
			// 在页面销毁前停止轮询
			console.log("============================================================================", this
				.pollingInterval)
			clearInterval(this.pollingInterval);
		},
		methods: {
			getUserRole(){
				let that = this;
			},
			gotoCheck(){
				uni.navigateTo({
					url: '/pages/verify_shop/verify_shop'
				})
			},
			trigger() {
				uni.navigateTo({
					url: '/pages/add_shop/add_shop'
				})
			},
			getMessage() {
				let that = this;
				that.pollingInterval = setInterval(() => {
					that.$ajax(that.$url.getMessage + "?receiverId=" + uni.getStorageSync("userId"), "GET", null,
						function(resp) {
							console.log(resp.data.result)
							if (resp.data.result.length > 0) {
								that.commentMessage = "您有" + resp.data.result.length + "条新评论";
								that.show = true;
								uni.showToast({
									icon: 'none',
									title: '收到一条新消息',
									duration: 2000
								})
								// for (var i = 0; i < resp.data.result.length; i++) {
								// 	let jsonObject = JSON.parse(resp.data.result[i].message)

								// }
							}
						})
				}, 16000); // 间隔16秒（16000毫秒）轮询一次
			},
			search() {
				let that = this;
				if (that.searchValue == "") {
					uni.showToast({
						icon: 'none',
						title: '请输入搜索内容'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/search_result/search_result?searchValue=' + that.searchValue
				})
			},
			loadMessageList: function(ref) {
				let that = this;
				let data = {
					start: ref.page,
					length: ref.length,
					position: ref.position,
					floor: ref.floor,
					searchValue: ''
				};
				this.$ajax(that.$url.searchAllShopsByPage, 'POST', data, function(resp) {
					let result = resp.data.result;
					if (result == null || result.length == 0) {
						ref.isLastPage = true;
						ref.page = ref.page - 1;
						uni.showToast({
							icon: 'none',
							title: '已经到底了'
						});
					} else {
						if (ref.page == 1) {
							ref.cardList = [];
						}
						ref.cardList = ref.cardList.concat(result);
					}
				});
				let dataClass = {
					position: that.position
				};
				that.$ajax(that.$url.searchAllActClass, 'POST', dataClass, function(resp) {
					that.goodsArr = resp.data.result;
				});
			},
			getGoods(item) {
				uni.setStorageSync('shopId', item.id)
				uni.navigateTo({
					url: '../shop_content/shop_content'
				})
			},
			getItem(index) {
				let that = this;
				if (index == that.goodsArr.length - 1) {
					that.floor = 0;
					that.page = 1;
					that.length = 10;
					that.loadMessageList(that);
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '店铺筛选成功'
				})
				that.cardList = [];
				that.floor = index + 1;
				that.page = 1;
				that.length = 10;
				that.loadMessageList(that);
			},
			click(index) {
				let that = this;
				that.page = 1;
				that.length = 10;
				if (index.name === '北苑') {
					that.position = 'north'
					that.isBeiYuan = true;
					that.isNanYuan = false;
				} else if (index.name === '南苑') {
					that.position = 'south'
					that.isNanYuan = true;
					that.isBeiYuan = false;
				}
				that.floor = 0;
				that.cardList = [];
				that.loadMessageList(that);
			}
		}
	};
</script>

<style>
	.lunbotu {
		padding-top: 40rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	/* 分割线样式 */
	.divider {
		margin-top: 50rpx;
		height: 10px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.isLoading {
		margin-top: 400rpx;
		margin-left: 85rpx;
	}

	.card-list {
		position: absolute;
		margin-top: 20rpx;
		/* display: flex; */
		flex-direction: column;
		padding-bottom: 88rpx;
	}

	.card-item {
		display: flex;
		align-items: center;
		padding: 16px;
	}

	.card-image {
		margin-right: 16px;
	}

	.card-content {
		flex: 1;
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.card-description {
		font-size: 14px;
		color: #666;
	}

	// 容器
	.scrollContainer {
		padding-top: 40rpx;
		padding-left: 20rpx;
		width: 666rpx;
		height: 124rpx;
		white-space: nowrap;
	}

	// 容器项
	.scrollitem {
		display: inline-block;
		margin-left: 30rpx;
		height: 234rpx;
	}

	.scrollimage {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		/* 将边框半径设置为50%以实现圆形效果 */
		object-fit: cover;
		/* 保持图片比例并裁剪超出的部分 */
	}

	.recommandItemText {
		font-size: 20rpx;
		width: 110rpx;
		padding-left: 5rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.EmptyData {
		text-align: center;
		margin-top: 50rpx;
	}

	.search {
		margin-top: 20rpx;
	}

	.tabs {
		margin-left: 270rpx;
	}
</style>